<template>
  <label class="switch-box" :class="{ active: flag }">
    <input
      type="checkbox"
      :checked="flag"
      @change="upadteFlag($event.target.checked)"
    />
    <span class="pot"></span>
  </label>
</template>

<script>
export default {
  model:{
    prop:"flag",
    event:"update:flag"
  },
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    upadteFlag(nv) {
      this.$emit("update:flag", nv);
    },
  },
};
</script>

<style scoped>
.switch-box {
  font-size: 10px;
  display: inline-block;
  width: 8em;
  height: 4em;
  border-radius: 1000em;
  background-color: #ccc;
  background-color: #ff4949;
  box-shadow: 0 0 4px #8b2727 inset;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}
.switch-box.active {
  background-color: #13ce66;
  box-shadow: 0 0 4px #0c763b inset;
}
.switch-box > input[type="checkbox"] {
  display: none;
}
.switch-box .pot {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: white;
  border-radius: 50%;
  transform: scale(0.8);
  box-shadow: 0px 0px 4px #666;
  transition: all 0.3s ease;
}
.switch-box.active .pot {
  margin-left: 4em;
}
</style>